<template>
	<div class="app-container">
		<div class="table">
			<div class="table-top">
				<p>
					<span>产品名称：</span>
					<el-input v-model="form.nametitle"></el-input>
				</p>
				<p>
					<span>净含量：</span>
					<el-select v-model="form.suttle" placeholder="请选择净含量">
						<el-option
							v-for="item in jkglist"
							:key="item.id"
							:label="item.jingzhong"
							:value="item.jingzhong">
						</el-option>
					</el-select>
				</p>
			</div>
			<div class="table-center">
				<div class="table-center-l">
					<p>
						<span>执行标准：</span>
						<!-- <span>{{form.standard}}</span> -->
						<el-select v-model="form.standard" placeholder="请选择执行标准">
							<el-option
								v-for="item in biaozhunlist"
								:key="item.id"
								:label="item.standard"
								:value="item.standard">
							</el-option>
						</el-select>
					</p>
					<p>
						<span>生产日期：</span>
						<el-input v-model="form.dateproduced" placeholder="请输入生产日期" disabled></el-input>
					</p>
					<p>
						<span>生产批号：</span>
						<el-input v-model="form.pihao" placeholder="请输入生产批号" disabled></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status != 5 && form.status != 3 && form.status != 2 && form.status != 1">
					
				</div>
				<div class="table-center-c" v-if="form.status == 1">
					<p>
						<span>等级：</span>
						<el-input v-model="form.grades" placeholder="等级"></el-input>
					</p>
					<p>
						<span>规格：</span>
						<el-input v-model="form.specifications" placeholder="规格"></el-input>
					</p>
					<p>
						<span>类别：</span>
						<el-input v-model="form.categorys" placeholder="类别"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 2">
					<p>
						<span>ERP编码：</span>
						<el-input v-model="form.erpcode" placeholder="等级"></el-input>
					</p>
					<p>
						<span>SAP代码：</span>
						<el-input v-model="form.sapcode" placeholder="规格"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="类别"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 3">
					<p>
						<span>物料代码：</span>
						<el-input v-model="form.materielcode" placeholder="等级"></el-input>
					</p>
					<p>
						<span>供应商：</span>
						<el-input v-model="form.suppliers" placeholder="规格"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="类别"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 5">
					<p>
						<span>等级：</span>
						<el-input v-model="form.grades" placeholder="等级"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="类别"></el-input>
					</p>
				</div>
				<div class="table-center-r">
					<p>
					  <span>生产许可证编号：</span>
						<el-input v-model="form.tab" placeholder="生产许可证编号"></el-input>
					</p>
					<p v-if="form.status == 6 || form.status == 7">
					  <span>规 格：</span>
						<el-input v-model="form.specifications" placeholder="规格"></el-input>
					  <!-- <span>{{form.specifications}}</span> -->
					</p>
					<p v-else>
					  <span>毛 重：</span>
					  <el-select v-model="form.kg" placeholder="请选择毛重">
					  	<el-option
					  		v-for="item in mkglist"
					  		:key="item.id"
					  		:label="item.maozhong"
					  		:value="item.maozhong">
					  	</el-option>
					  </el-select>
					</p>
					<p v-if="form.hanliang">
					  <span>含 量：</span>
						<el-input v-model="form.hanliang" placeholder="请输入含量"></el-input>
					  <!-- <span>{{form.hanliang}}</span> -->
					</p>
				</div>
			</div>
			<!-- tale底部 -->
			<div class="table-btm">
				<div>
					<p>
						<span v-if="form.tradename">商品名：</span>
						<el-input v-model="form.tradename" v-if="form.tradename"></el-input>
					</p>
					<p v-if="form.piwen">
						<span v-if="!form.status || form.status == 6">批准文号：</span>
						<el-input v-model="form.piwen" v-if="!form.status || form.status == 6"></el-input>
					</p>
					<p>
						<span>类型：</span>
						<el-input v-model="form.type"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>成分表：</span>
						<el-input v-model="form.chengfenvalues"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>保质期：</span>
						<el-input v-model="form.expirations"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>使用量：</span>
						<el-select v-model="form.use" placeholder="请选择使用量">
							<el-option
								v-for="item in uselist"
								:key="item.id"
								:label="item.method"
								:value="item.method">
							</el-option>
						</el-select>
					</p>
				</div>
				<div>
					<p>
						<span>使用方法：</span>
						<el-input v-model="form.method"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>适用范围：</span>
						<el-input v-model="form.scope"></el-input>
					</p>
				</div>
				<div v-if="form.ensurevalue">
					<p>
						<span>成分保证值：</span>
						<el-input v-model="form.ensurevalue"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>贮藏方法：</span>
						<el-input type="textarea" v-model="form.condition"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>注意事项：</span>
						<el-input type="textarea" v-model="form.notice"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>所属目录：</span>
						<el-select v-model="form.typeid" placeholder="请选择所属目录">
							<el-option
								v-for="item in mululist"
								:key="item.id"
								:label="item.catalogueName"
								:value="item.id">
							</el-option>
						</el-select>
					</p>
				</div>
				<div>
					<p>
						<span>备注：</span>
						<el-input type="textarea" v-model="form.beizhu"></el-input>
					</p>
				</div>
				<h6>
          <div style="display: flex; align-items: center;">
            <img src="@/assets/img/qingzhen.jpg" width="100" v-if="form.status == 7" />
            <img src="@/assets/img/kosher.png" width="100" v-if="form.status == 8" />
            <svg
              width="200px"
              height="70px"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              style="margin: 0px;"
            >
              <polygon
                points="50,31 120,59  190,31  120,1"
                style="fill:#FFFFFF;stroke:#000000;stroke-width:2;"
              />
              <text style="fill: black;font-size: 16px;" x="95" y="35">合&nbsp;&nbsp;&nbsp;&nbsp;格</text>
            </svg>
          </div>
          <!-- <img src="@/assets/img/logo.jpg" alt=""> -->
        </h6>
			</div>
			<div class="tips">
				<p>本企业通过 ISO9001、ISO14001、ISO45001、ISO22000 管理体系认证</p>
				<p><span>生产商：河南金丹乳酸科技股份有限公司</span><span>地址：河南省周口市郸城县金丹大道08号</span></p>
				<p><span>电话：0394-3195355 3195318</span><span>传真：0394-3195766</span><span>网址：http://www.hnjindan.com</span></p>
			</div>
			<div class="submit" @click="submit" :class="isClick ? 'disable' : ''">提交</div>
		</div>
	</div>
</template>

<script>
import { updateEwmMuban,getJingzhong,getMaozhong,getUseMothod,ewmMulu,getEwmBiaozhun } from '@/api/ewmApi'
export default {
	data() {
		return {
			form: {
				beizhu: '',        //备注
				condition: '',     //贮藏方法
				dateproduced: '',  //生产日期
				ensurevalue: '',   //成分保证值
				guige: '',         //规格
				hanliang: '',      //净含量
				kg: '',            //毛重
				//materielcode: '',  //物料编码
				method: '',    		 //使用方法
				nametitle: '',     //产品名称
				notice: '',    		 //注意事项
				piwen: '',         //批准文号
				//queren: '',        //确认是否让用户可用
				scope: '',         //适用范围
				//sorttype: '',      //排序
				standard: '',      //执行标准
				//supplierid: '',    //备注
				suppliertype: '',  //成分表
				suttle: '',        //净重
				tab: '',           //生产许可证编号
				tradename: '',     //商品名
				type: '',          //类型
				typeid: 0,         //目录id
				use: '',           //使用量
				//username: ''       //备注
			},
			uselist: [],   //使用量数组
			mululist: [],  //目录数组
			jkglist: [],   //净重数组
			mkglist: [],   //毛重数组
			biaozhunlist: [],   //执行标准
			isClick: false
		};
	},
	mounted(){
    this.ewmInit()
    this.form = JSON.parse(this.$route.params.options)
    console.log(this.form)
	},
	methods: {
		ewmInit(){
			this.getJkglist()
			this.getMkglist()
			this.getUselist()
			this.getMululist()
			this.getBiaozhunlist()
		},
		submit() {
			this.isClick = true
			updateEwmMuban(this.form).then(res => {
				console.log(res)
				this.$message({
					message: res.message,
					type: "success"
				})
				this.$router.go(-1)
			})
		},
		getJkglist(){
			getJingzhong({}).then(res => {
				console.log(res)
				this.jkglist = res.data
			})
		},
		getMkglist(){
			getMaozhong({}).then(res => {
				console.log(res)
				this.mkglist = res.data
			})
		},
		getUselist(){
			getUseMothod({}).then(res => {
				console.log(res)
				this.uselist = res.data
			})
		},
		getMululist(){
			ewmMulu({}).then(res => {
				console.log(res)
				this.mululist = res.data
			})
		},
		getBiaozhunlist(){
			getEwmBiaozhun({}).then(res => {
				console.log(res)
				this.biaozhunlist = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
p {
	padding: 0;
	margin: 5px 0;
}
.app-container {
	background: #fff;
}
.table {
	width: 1100px;
	&-top {
		border-top: 3px solid #000000;
		padding: 10px 0 8px 0;
		display: flex;
		align-items: center;
		> p {
			// font-family: '宋体';
			flex: 1;
			display: flex;
			font-size: 29px;
			align-items: center;
			/deep/.el-input {
				width: 200px;
			}
			/deep/.el-input--medium .el-input__inner {
				width: 200px !important;
			}
		}
	}
	&-center {
		border-top: 3px solid #000000;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 8px 0;
		// &-l{
		// 	flex: 1;
		// }
		// &-c{
		// 	flex: 1;
		// }
		// &-r{
		// 	flex: 1.5;
		// }
		>div{
			> p {
				font-family: '宋体';
				width: 100%;
				display: flex;
				font-size: 20px;
				// font-weight: bold;
				align-items: center;
				/deep/.el-input {
					width: 200px;
					height: 32px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
					height: 32px;
				}
			}
		}
	}
	&-btm {
		position: relative;
		border-top: 3px solid #000000;
		// padding-top: 10px;
		// height: 370px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		> div {
			display: flex;
			width: 100%;
			// flex-wrap: wrap;
			&:first-child{
				justify-content: space-between;
				> p {
          width: auto;
        }
			}
			> p {
				font-family: '宋体';
				width: 95%;
				// display: flex;
				font-size: 20px;
				// height: 40px;
				// font-weight: bold;
				// align-items: center;
				// >span{
				// 	&:last-child{
				// 		flex: 1;
				// 		overflow: hidden;
				// 	}
				// }
				/deep/.el-input {
					width: 200px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
				}
				/deep/.el-textarea {
					width: 200px !important;
				}
				&:nth-child(3) {
					justify-content: flex-end;
				}
			}
		}
		> h6 {
			position: absolute;
			right: 0;
			top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			>img{
				width: 120px;
				height: 120px;
				margin: 20px 0 0 20px;
			}
		}
	}
}
.tips{
		width: 100%;
		>p{
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
		}
	}
	.submit{
		width: 100px;
		height: 40px;
		background: #18a05e;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}
</style>
